<template>
	<view class="body">
		<u-navbar title="银行卡管理" :title-bold="true" title-color="#000" :border-bottom="false" custom-class="home-bg" :background="{ background: 'transparent' }"></u-navbar>

		<view v-if="loading" class="add-load">
			<u-loading mode="flower"></u-loading>
		</view>

		<view v-else-if="mybankList.length != 0" class="app-bottom">
			<view v-for="(item, index) in mybankList" style="margin-top: 50rpx">
				<view class="card-top">
					<view class="flex align-center">
						<!-- <u-avatar src="/static/main/cs3.jpg" size="50"></u-avatar> -->
						<view class="right-name">
							<text>{{ item.bankName }}（{{ String(item.cardNumber).slice(-4) }}）</text>
							<text style="font-size: 24rpx; color: #ffffff; font-weight: 400">{{ item.remark }}</text>
						</view>
					</view>
					<view class="str-card">···· ···· ····</view>
			<!-- 		<view class="tap-but">
						<view class="top-but">编辑</view>
						<view class="bottom-but">删除</view>
					</view> -->
				</view>
				
			</view>
		</view>

		<u-empty v-else icon-size="400" src="/static/main/image2x.png"></u-empty>

		<view class="flex align-center buttom">
			<button @click="addCardUrl()">添加银行卡</button>
		</view>
	</view>
</template>

<script>
import user from '@/api/user';

export default {
	data() {
		return {
			loading: true,
			mybankList: [],
			total: 0,
			pageNum: 1,
			pageSize: 10
		};
	},
	onShow(e) {
		this.pageNum = 1;
		this.getMybanklist();
	},
	onReachBottom() {
		if (this.total > this.pageNum * this.pageSize) {
			this.pageNum++;
			this.getMybankPage();
		}
	},
	methods: {
		addCardUrl() {
			uni.navigateTo({
				url: '/pages/user/card/addCard'
			});
		},
		getMybanklist() {
			user.getMybanklist({
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}).then((res) => {
				this.mybankList = res.rows;
				this.loading = false;
				this.total = res.total;
			});
		},
		getMybankPage() {
			user.getMybanklist({
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}).then((res) => {
				console.log(res);
				this.mybankList.push(...res.rows);
				this.total = res.total;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.flex {
	display: flex;
}
.align-center {
	align-items: center;
}
.flex-center {
	justify-content: center;
}
.flex-between {
	justify-content: space-between;
}
.flex-column {
	flex-direction: column;
}

.body {
	background: #f5f5f5;
	margin: 0 30rpx;
	padding-bottom: 100rpx;
}

.tap-but{
	position: absolute;
	right: 30rpx;
	height: 130rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	.top-but{
		color: #ffaa00;
	}
	.bottom-but{
		color: red;
	}
}

.buttom {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translate(-50%);
	height: 120rpx;
	width: 100%;
	background-color: #fff;
	border-radius: 30rpx 30rpx 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	button {
		border-radius: 100rpx;
		width: 500rpx;
		background-color: #f05a39;
		color: #fff;
	}
}

.card-top {
	position: relative;
	
	width: 686rpx;
	height: 198rpx;
	background: #13bc92;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.right-name {
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
	}

	.str-card {
		color: #ffffff;
		font-weight: bold;
		font-size: 60rpx;
		line-height: 10rpx;
		margin-left: 60rpx;
	}
}
.card-bottom {
	margin-top: 60rpx;
	width: 686rpx;
	height: 144rpx;
	background: #ffffff;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	display: flex;
	align-items: center;
	span {
		margin: 0 10rpx 0 30rpx;
		width: 44rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 44rpx;
		border: #000000 dashed 1px;
	}
	text {
		font-size: 28rpx;
		color: #000000;
	}
}
</style>
